<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="search-wrap">
      <header-top title="搜索" />
      <div class="search-top">
        <form action="/">
          <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
          />
        </form>
        <div class="tags">
          <span
            :class="{ act: cur === i }"
            class="it"
            v-for="(it, i) in tags"
            :key="i"
            @click="handleSearch(i)"
            >{{ it }}</span
          >
        </div>
        <div class="project-list">
          <van-list
            v-model="loading"
            :finished="finished"
            :immediate-check="false"
            finished-text="没有更多了呦"
            @load="onLoad"
          >
            <div v-if="approveList.length">
              <div
                v-for="(approveData, i) in approveList"
                :key="'id' + i"
                class="approve-card-container"
                @click="goDetail(approveData)"
              >
                <div class="title">
                  [{{ approveData.no }}]{{ approveData.title }}
                </div>
                <div class="name-wrap label-text">
                  <span class="label">招标单位：</span>
                  <span class="name">{{ approveData.zbdw }}</span>
                </div>
                <div class="status-wrap label-text">
                  <span class="label">审批状态：</span>
                  <span
                    class="status"
                    :class="['status-' + approveData.status]"
                  >
                    {{ statusName[approveData.status - 1] }}</span
                  >
                </div>
                <div class="create-time">
                  创建时间:{{ approveData.create_time | createTime }}
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
  </van-pull-refresh>
</template>
  <script>
import { Toast } from 'vant';
import HeaderTop from '../components/HeaderTop'
import { getFlowList } from "../api";
export default {
  data() {
    return {
      tags: ['全部', '按项目名', '按招标人'],
      cur: 0,
      value: '',
      tagList: ['zbrorpname', 'pname', 'zbr'],
      statusName: ['待提交', '审批中', '审批未通过', '审批通过'],
      currentTag: 'zbrorpname',
      searchForm: {
        type: 2,
        pname: '',
        zbr: '',
        zbrorpname: '',
      },
      page: {
        pageSize: 5,
        pageNum: 1,
        total: 0,
      },
      approveList: [],
      isLoading: false,
      loading: false,
      finished: !1
    }
  },
  mounted() {
    //    this.getCaptchaImg()
  },
  methods: {
    onLoad() {
      this.approveList = []
      this.getApproveList(!1)
    },
    onSearch() {
      // Toast(val)
      this.approveList = []
      this.page.pageNum = 1
      this.getApproveList(!0)
    },
    onCancel() {
      // Toast('取消')
    },
    handleSearch(i) {
      this.cur = i
      this.searchForm.pname = ''
      this.searchForm.zbr = ''
      this.searchForm.zbrorpname = ''
      this.currentTag = this.tagList[i]
      this.page.pageNum = 1
      this.search(false)
    },
    search(type) {
      this.approveList = []
      this.page.pageNum = 1
      this.getApproveList(type)
    },
    onRefresh() {
      var that = this
      this.page.pageNum = 1
      this.approveList = []
      that.getApproveList()
      // setTimeout(() => {

      //     Toast('刷新成功')
      //     that.isLoading = false
      // }, 1000)
    },
    getApproveList(type) {
      var that = this

      if (!that.value && type) {
        Toast('请输入搜索内容')
        return
      }
      that.searchForm[that.currentTag] = that.value
      const params = Object.assign({}, that.searchForm, that.page)
      console.log(params)
      const token = localStorage.getItem('zzdToken')
      getFlowList(params, token).then(res => {
        if (res && res.data.code == 1) {
          that.finished = res.data.dataList.length <= 5 ? !0 : !1
          // that.finished = !0
          that.approveList = that.approveList.concat(res.data.dataList)
          that.page.pageNum += 1
          that.isLoading = false
          Toast('刷新成功')
        }
        // else if (res.data.code === 500) {
        //   if (res.data.msg === 'sso_check_fail_user') {
        //     Dialog.alert({
        //       message: '登录失效',
        //     }).then(() => {
        //       this.$router.replace({
        //         path: '/login'
        //       })
        //     });
        //   }
        // }
        else {
          this.isLoading = false
          Toast('刷新成功')
        }
      })
    },
    goDetail(it) {
      this.$router.push({ path: '/detail', query: { id: it.id, tablename: it.tableName } })
    },
  },
  filters: {
    createTime(val) {
      var date = new Date(val).toJSON();
      var d = date.replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
      return d;
    }
  },
  components: {
    HeaderTop
  }
}
  </script>
  <style lang="stylus" rel="stylesheet/stylus" scoped>
  @import '../common/stylus/mixin.styl';
</style>
  <style lang="scss" scoped>
.search-wrap {
  background-color: #f7f8fc;
  // height: calc(100vh);
  min-height: 100vh;
  .search-top {
    // margin: 0 10px;
  }
  .tags {
    padding: 12px 10px;
    .it {
      margin-right: 25px;
      padding: 6px 8px;
      font-size: 13px;
      height: 30px;
      color: #333;
      background: #f2f2f5;
      border: 0.5px solid #999;
      border-radius: 4px;
    }
    .act {
      background: #f2f2f5;
      border: 1px solid #3a80ff;
      color: #1769ff;
      font-weight: 500;
    }
  }
  .project-list {
    margin-top: 5px;
    position: relative;
  }
  .project-list .empty {
    // padding-top: 25%;
    color: #9ea6b1;
    font-size: 16px;
    text-align: center;
  }
  .project-list .empty .text {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .project-list .empty .link {
    color: #007aff;
    vertical-align: -2px;
    margin: 0 5px;
  }
}
.approve-card-container {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px;
  margin-bottom: 15px;
  .title {
    margin-bottom: 12px;
    font-size: 15px;
    word-break: break-all;
  }
  .label-text {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 14px;
    .label {
      font-weight: 400;
      min-width: 100px;
      color: rgba(158, 166, 177, 1);
    }
  }
  .create-time {
    font-size: 12px;
    color: rgba(158, 166, 177, 1);
    text-align: right;
  }
}
.status-1 {
  color: rgba(158, 166, 177, 1);
}
.status-2 {
  color: rgba(247, 192, 24, 1);
}
.status-3 {
  color: rgba(190, 13, 34, 1);
}
.status-4 {
  color: rgba(19, 112, 14, 1);
}
</style>
  